<template>
  <form-item>
    <el-tabs v-model="activeName">
      <el-tab-pane name="second" label="属性">
        <el-form-item label="className">
          <el-input
            v-model="options.className"
            placeholder="请输入className"
          ></el-input>
        </el-form-item>
        <el-form-item label="title">
          <el-input
            v-model="options.title"
            placeholder="请输入title"
          ></el-input>
        </el-form-item>
        <template v-if="viewType === 'drag'">
          <freeItem :commonOptions="commonOptions"></freeItem>
        </template>
        <el-form-item label="蓝色卡片">
          <el-switch v-model="options.active"></el-switch>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane name="third" label="插槽" v-if="viewType === 'form'">
        <el-divider>可选组件</el-divider>
        <el-form-item label="头部左侧">
          <el-select v-model="slot.left" multiple value-key="key">
            <el-option
              v-for="(item, index) in slotOptions"
              :key="index"
              v-bind="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头部右侧">
          <el-select v-model="slot.right" multiple value-key="key">
            <el-option
              v-for="(item, index) in slotOptions"
              :key="index"
              v-bind="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-divider>主体插槽样式</el-divider>
        <el-form-item label-width="0">
          <options-component
            :options.sync="options.cardStyle"
            @add="() => add('__options__', 'cardStyle')"
            @remove="(index) => remove(index, '__options__', 'cardStyle')"
          ></options-component>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
  </form-item>
</template>
<script>
import common from '../mixin';
export default {
  name: 'CardTool',
  mixins: [common],
  data() {
    return {
      slotOptions: [
        {
          value: {
            tag: 'el-select',
            key: 1,
            vmodel: '1',
            options: {
              clearable: true
            }
          },

          label: '选择框'
        },
        {
          value: {
            tag: 'el-switch',
            key: 2,
            vmodel: true,
            options: {
              clearable: true
            }
          },

          label: '开关'
        },
        {
          value: {
            tag: 'el-time-select',
            key: 3,
            vmodel: '23:59:59',
            options: {
              clearable: true
            }
          },

          label: '时间选择器'
        },
        {
          value: {
            tag: 'el-input',
            key: 4,
            vmodel: '2021-10-01',
            options: {
              clearable: true
            }
          },

          label: '输入框'
        },
        {
          value: {
            tag: 'el-date-picker',
            key: 5,
            vmodel: '',
            options: {
              clearable: true
            }
          },

          label: '日期选择器'
        },
        {
          value: {
            tag: 'el-date-picker',
            key: 6,
            vmodel: '2021-10-01',
            options: {
              clearable: true,
              type: 'datetime'
            }
          },

          label: '日期时间选择器'
        },
        {
          value: {
            tag: 'el-button',
            key: 7,
            vmodel: '',
            options: {
              type: 'primary'
            },
            text: '我是大按钮'
          },

          label: '按钮'
        },
        {
          value: {
            tag: 'el-link',
            key: 8,
            vmodel: '超链接',
            options: {
              href: 'https://www.baidu.com',
              type: 'info'
            },
            text: '文字链接'
          },
          label: '超链接'
        },
        {
          value: {
            tag: 'span',
            key: 9,
            vmodel: '纯文本',
            options: {},
            text: '纯文本'
          },

          label: '纯文本'
        }
      ]
    };
  }
};
</script>
